<!--部门管理 -->
<template>
  <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
  <div class="app-container main flex-box c-c-c">
    <el-row :gutter="20" class="search_box">
      <el-col>
        <el-form
          ref="queryForm"
          :model="searchData"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item label="部门名称">
            <el-input
              v-model.trim="searchData.name"
              placeholder="请输入要查询的部门名称"
              clearable
              @keyup.enter.native="GetList"
              @clear="GetList"
            />
          </el-form-item>
          <el-form-item label="部门状态">
            <el-select
              v-model="searchData.enabled"
              filterable
              placeholder="请选择父级标题"
              @change="GetList"
            >
              <el-option :label="'全部部门状态'" :value="-1" />
              <el-option
                v-for="item in isTrueList"
                :key="item.optionId"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- icon="el-icon-search" -->
            <el-button type="primary" @click="GetList">搜索</el-button>
            <!-- icon="el-icon-refresh" -->
            <el-button @click="ReData">重置 </el-button>
          </el-form-item>
          <!--  v-permission="['PRIV_TITTLE_CREATE']" -->
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="btn_list">
      <el-col>
        <el-button type="primary" @click="OpenAddTitle()">新增部门</el-button>
      </el-col>
    </el-row>

    <el-row class="list_box">
      <el-table
        v-loading="loading"
        height="100%"
        ref="DepartmentList"
        :data="list"
        row-key="id"
        stripe
        border
        :default-sort="{ prop: searchData.orderBy, order: searchData.sort }"
        @sort-change="handleSortable"
      >
        <el-table-column
          type="index"
          :index="handleIndexCalc"
          label="#"
          align="center"
        />
        <el-table-column
          prop="name"
          label="部门名称"
          width="140"
          align="center"
        />
        <el-table-column
          prop="shortName"
          label="部门简称"
          align="center"
          width="240"
        />

        <el-table-column
          prop="areaName"
          label="所属区域"
          width="100"
          align="center"
        />
        <el-table-column
          prop="scopeName"
          :show-overflow-tooltip="true"
          label="查看范围"
          align="center"
        />
        <!-- <el-table-column prop="deptTypeName" :show-overflow-tooltip="true" label="部门类型" align="center" /> -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div class="state_department" v-if="scope.row.enabled == 1">
              {{ scope.row.enabledName }}
            </div>
            <div v-else>
              {{ scope.row.enabledName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          sortable
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
          align="center"
          sortable
        />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              class="edit_list_btn list_btn"
              v-permission="['PRIV_POWERS_UPDATE']"
              type="info"
              size="mini"
              @click="EditTitle(scope.row)"
              >编辑</el-button
            >
            <!--  icon="el-icon-delete" -->
            <el-button
              class="del_list_btn list_btn"
              v-permission="['PRIV_POWERS_DELETE']"
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除部门</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <m-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="addData"
        :model="addData"
        :rules="rules"
        label-width="80px"
        class="add_data_form"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="部门名称" prop="name">
              <el-input
                v-model.trim="addData.name"
                maxlength="50"
                placeholder="请输入部门名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="部门简称">
              <el-input
                v-model.trim="addData.shortName"
                maxlength="50"
                placeholder="请输入部门简称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属地区" prop="areaName">
              <el-input
                v-model.trim="addData.areaName"
                maxlength="50"
                placeholder="请输入部门所属地区"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="部门类型" prop="deptType">
              <el-select v-model="addData.deptType" filterable placeholder="请选择部门类型">
                <el-option v-for="item in departmentType" :key="item.optionId" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label=" 查看范围" prop="scope">
              <el-radio-group v-model="addData.scope">
                <el-radio
                  :label="item.value"
                  v-for="item in departmentPrivilegesList"
                  :key="item.optionId"
                >
                  {{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用" prop="enabled">
              <el-radio-group v-model="addData.enabled">
                <el-radio
                  :label="item.value"
                  v-for="item in isTrueList"
                  :key="item.optionId"
                >
                  {{ item.label }}</el-radio
                >
                <!-- <el-radio :label="0">
                  关闭</el-radio>
                <el-radio :label="1">
                  启用</el-radio> -->
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </m-dialog>
    <el-row :gutter="20" class="pagination_box">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchData.pageIndex"
        :limit.sync="searchData.pageSize"
        @pagination="GetList"
      />
    </el-row>
  </div>
</template>
<script type="javascript/text">


import {
  addDepartment, getDepartmentList, editDepartment, getOneDepartment, delOneDepartment,
  // @ts-ignore
} from "@/api/users/department";
// @ts-ignore
import { getToken, setToken, removeToken } from "@/utils/auth";
import {
  GetValueList,
  // @ts-ignore
} from "@/api/system/options";
// @ts-ignore
import { Edit } from "vxe-table";
import H5Box from "../../../components/H5Box/H5Box.vue";
export default {
  components: { H5Box },
  data() {
    return {
      /**请求参数 */
      searchData: {
        // label: "",
        name: "",
        enabled: -1,
        orderBy: "updateTime",
        sort: "descending",
        pageIndex: 1,
        pageSize: 20,
      },
      /**总数 */
      total: 0,
      /**列表数据 */
      list: [],
      /**备份列表数据 */
      backupList: [],
      // 遮罩层
      loading: true,
      /**添加参数 */
      addData: {
        name: "",
        shortName: "",
        areaName: "",
        deptType: "",
        scope: ' 0',
        enabled: '1',
        id: undefined
      },
      /**新增的对话框标题 */
      title: "",
      /**开关 */
      open: false,
      // 表单校验
      rules: {
        name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
        areaName: [{ required: true, message: "所属地区不能为空", trigger: "blur" }],
        deptType: [
          { required: true, message: "部门类型不能为空", trigger: "blur" },
        ],
      },
      /**部门类型 */
      departmentType: [],
      /**是否启用 */
      isTrueList: [],
      /**部门权限查看范围 */
      departmentPrivilegesList: []
    };
  },
  methods: {
    /**获取部门类型数据 状态等数据*/
    async GetTypeList() {
      let { data, statusCode } = await GetValueList("Enabled");

if (statusCode != 200) return;

      this.isTrueList = data
      let row = await GetValueList("DepartmentScope");

      if (row.statusCode != 200) return;
      this.departmentPrivilegesList = row.data
      this.GetList()
    },
    /*,*获取部门数据 */
    async GetList() {
      // @ts-ignore
      let { data, statusCode } = await getDepartmentList(this.searchData);
      if (statusCode != 200) return;
      this.list = data.dataSource;
      this.backupList = JSON.parse(JSON.stringify(data.dataSource));
      console.log(data);
      this.total = data.totalCount;
      this.loading = false;
    },
    /**重置请求数据 */
    ReData() {
      this.searchData = {
        name: "",
        enabled: -1,
        orderBy: "updateTime",
        sort: "descending",
        pageIndex: 1,
        pageSize: 20,
      };
      this.$refs.DepartmentList.sort('updateTime', 'descending')
      this.GetList();
    },
    /**新增字典标题 */
    OpenAddTitle() {
      this.title = "新增部门";
      this.addData = {
        name: "",
        shortName: "",
        areaName: "",
        deptType: "",
        scope: '0',
        enabled: '1',
        id: undefined,
      };
      this.open = true;
    },
    /**编辑字典标题 */
    async EditTitle(row) {
      this.title = "编辑部门";
      // @ts-ignore
      let { data, statusCode } = await getOneDepartment(row.id);
      if (statusCode != 200) return;
      data.scope = data.scope.toString()
      data.enabled = data.enabled.toString()
      this.addData = data;
      this.open = true;
    },
    // 自动计算分页 Id
    handleIndexCalc(index) {
      return (
        (this.searchData.pageIndex - 1) * this.searchData.pageSize + index + 1
      );
    },
    /** 提交按钮 */
    SubmitForm() {
      // @ts-ignore
      this.$refs["addData"].validate(async (valid) => {
        if (valid) {
          if (this.addData.id != undefined) {
            // @ts-ignore
            let { statusCode } = await editDepartment(this.addData);
            if (statusCode != 200) return;
          } else {
            let { statusCode } = await addDepartment(this.addData);
            if (statusCode != 200) return;

          }
          // @ts-ignore
          this.$message({
            message: "添加成功",
            type: "success",
            center: true,
          });
          this.open = false;
          this.GetList();
        }
      });
    },
    /**删除字典标题 */
    async handleDelete(row) {
      // @ts-ignore
      this.$confirm(
        `此操作将永久删除该部门信息（${row.name}）, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          // @ts-ignore
          let { statusCode } = await delOneDepartment(row.id);
          if (statusCode != 200) return;
          // @ts-ignore
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.GetList();
        })
        .catch(() => {
          this.GetList();
        });
    },
    /**修改排序字段 */
    handleSortable(val) {
      this.searchData.orderBy = val.prop;
      this.searchData.sort = val.order;
      this.GetList();
    },
  },

  created() {
    this.GetTypeList();
  },
  mounted() { },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
